<template>
  <view class="settle-box">
    <!-- 全选 -->
    <label class="radio" @click="radioChange">
      <radio :checked="goodsNum === checkedNum" />
      <text>全选</text>
    </label>

    <!-- 合计 -->
    <view class="allCount">
      合计:
      <text>￥{{ checkedPrice }}</text>
    </view>
    <!-- 结算按钮 -->
    <view class="settle-btn" @click="onSettle">
      <text>结算({{ checkedNum }})</text>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
  data() {
    return {
      second: 3,
      timer: null
    };
  },
  computed: {
    ...mapState('myAddress', ['address', 'token']),
    ...mapState('myCart', ['cart']),
    ...mapGetters('myCart', ['checkedNum', 'goodsNum', 'checkedPrice']),
    ...mapGetters('myAddress', ['addressStr'])
  },
  methods: {
    ...mapMutations('myCart', ['allChange']),
    radioChange() {
      // 全选
      if (this.checkedNum !== this.goodsNum) {
        this.allChange(true);
      } else {
        this.allChange(false);
      }
    },
    async onSettle() {
      if (JSON.stringify(this.address) === '{}') {
        return uni.$showMsg('您还没有选择地址');
      }
      if (!this.checkedNum) {
        return uni.$showMsg('您还没有勾选商品');
      }
      if (!this.token) {
        //return uni.$showMsg('您还没有登录')
        this.showTips();
        this.timer = await setInterval(() => {
          --this.second;
          if (this.second === 0) {
            uni.switchTab({
              url: '/pages/my/my'
            });
            this.second = 3;
            return clearInterval(this.timer);
          }
          this.showTips();
        }, 1000);
        return;
      }
      // this.payOrder();
    },
    // async payOrder() {
    //   const params = {
    //     order_price: 0.01,
    //     consignee_addr: this.addressStr,
    //     goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
    //   };
    //   const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', params);
    //   if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！');
    //   const orderNumber = res.message.order_number;

    //   // 2. 订单预支付
    //   // 2.1 发起请求获取订单的支付信息
    //   const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber });
    //   // 2.2 预付订单生成失败
    //   if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！');
    //   // 2.3 得到订单支付相关的必要参数
    //   const payInfo = res2.message.pay;

    //   // 3. 发起微信支付
    //   // 3.1 调用 uni.requestPayment() 发起微信支付
    //   const [err, succ] = await uni.requestPayment(payInfo);
    //   // 3.2 未完成支付
    //   if (err) return uni.$showMsg('订单未支付！');
    //   // 3.3 完成了支付，进一步查询支付的结果
    //   const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber });
    //   // 3.4 检测到订单未支付
    //   if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！');
    //   // 3.5 检测到订单支付完成
    //   uni.showToast({
    //     title: '支付完成！',
    //     icon: 'success'
    //   })
    // },
    showTips() {
      uni.showToast({
        title: '请登录后在结算,' + this.second + '后跳转到登录',
        icon: 'none',
        duration: 1500,
        mask: true
      });
    }
  }
};
</script>

<style lang="scss">
.settle-box {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 90rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 15rpx;
  font-size: 28rpx;
  .radio {
  }
  .allCount {
    text {
      color: #c00000;
      font-weight: bold;
    }
  }
  .settle-btn {
    height: 90rpx;
    width: 200rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: #c00000;
    color: #fff;
  }
}
</style>
